<template>
  <div class="search">
    <el-form :inline="true" :model="queryForm">
      <el-form-item prop="type">
        <el-select clearable placeholder="请选择" v-model="queryForm.type">
          <el-option label="普通日志" :value="1"></el-option>
          <el-option label="错误日志" :value="2"></el-option>
          <el-option label="还单日志" :value="3"></el-option>
          <el-option label="拉单日志" :value="4"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getLogsData"
          >查找</el-button
        >
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="deleteLogs"
          >清空日志</el-button
        >
      </el-form-item>
    </el-form>
  </div>
  <div class="tables" style="padding: 10px">
    <el-scrollbar height="100%">
      <el-table
        :data="tableData"
        border
        style="width: 100%"
        :default-sort="{ prop: 'createTime', order: 'descending' }"
      >
        <el-table-column
          v-for="item in tableCloum"
          :prop="item.prop"
          :label="item.label"
          :formatter="item.formatter"
          :width="item.width"
          :align="item.align"
          :sortable="item.sortable"
        >
        </el-table-column>
      </el-table>
      <div
        class="pages"
        style="padding: 0; margin: 0; width: 100%; text-align: right"
      >
        <el-pagination
          class="role__page"
          background
          layout="prev, pager, next"
          :total="page.total"
          :page-size="page.pageSize"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import util from '@/utils/utils.js'
export default {
  name: 'Logs',
  data () {
    return {
      queryForm: {},
      page: {
        total: 0,
        pageNum: 1,
        pageSize: 1000
      },
      tableData: [],
      tableCloum: [
        {
          label: '日志信息',
          prop: 'content'
        },
        {
          label: '类型',
          prop: 'type',
          width: '100',
          align: 'center',
          formatter (row, cloum, value) {
            return {
              '1': '普通日志',
              '2': '错误日志',
              '3': '还单日志',
              '4': '拉单日志'
            }[value]
          }
        }, {
          label: "创建时间",
          prop: 'createTime',
          width: '150px',
          sortable: true,
          formatter (row, cloum, value) {
            return util.formateDate(new Date(value))
          }
        }
      ]
    }
  },
  methods: {
    /** 初始化获取数据 */
    async getLogsData () {
      let params = { ...this.queryForm, ...this.page }
      const { list, page } = await this.$api.getLogsData(params)
      this.page.total = page.total
      this.tableData = list
    },
    /** 清空 */
    async deleteLogs () {
      try {
        await this.$api.submitDeleteLogs()
        this.getLogsData()
        this.$message.success('已清空')
      } catch (error) {
        throw new Error(error)
      }
    },
    // 分页
    handleCurrentChange (curren) {
      this.page.pageNum = curren
      this.getLogsData()
    },
  },
  mounted () {
    this.getLogsData()
  }
}
</script>

<style scoped>
.search {
  width: 100%;
  height: 50px;
  background: #fff;
  margin-bottom: 20px;
  padding: 10px;
}
.tables {
  width: 100%;
  height: 90%;
  background: #fff;
}
</style>